import React, { Component } from 'react';
import { DualAxes } from '@ant-design/plots';
import "antd/dist/antd.css";
import "./style.scss";
import { connect } from "react-redux";

class BarChart extends Component {
  render() {

    const { data, lineData, trendConfig } = this.props;
    console.log(trendConfig, "传递的数据trendConfig");
    const defaultData = [];
    const xAxisText = '发生时间';
    const yAxisText = '加载次数';

    const config = {
      data: [data ? data : defaultData, lineData ? lineData : defaultData],
      xAxis: {
        title: {
          text: xAxisText,
        }
      },

      xField: 'xField',
      yField: ['yField', 'yField'],
      seriesField: 'type',
      geometryOptions: [
        {
          geometry: 'column',
          isGroup: true,
          columnWidthRatio: 0.4,
        },
        {
          geometry: 'line',
          seriesField: 'yField',
        }
      ],
      slider: {
        start: 0,
        end: 1
      },
      meta: {
        xField: {
          alias: xAxisText,
        },
       yField: {  
            alias: '加载次数', // 别名  
        },  
     


      },
      legend: {
        custom: true,
        position: 'bottom',
        items: [
          {
            value: 'yField',
            name: yAxisText,
            marker: {
              symbol: 'square',
              style: {
                fill: '#5B8FF9',
                r: 5,
              },
            },
          },
          {
            value: 'type',
            name: '平均启动耗时',
            marker: {
              symbol: 'square',
              style: {
                fill: '#3BD8A6',
                r: 5,
              },
            },
          },
          // {
          //   value: '2',
          //   name: '50%分位耗时',
          //   marker: {
          //     symbol: 'square',
          //     style: {
          //       fill: '#3BD8A6',
          //       r: 5,
          //     },
          //   },
          // },
          // {
          //   value: '3',
          //   name: '90%分位耗时',
          //   marker: {
          //     symbol: 'square',
          //     style: {
          //       fill: '#3BD8A6',
          //       r: 5,
          //     },
          //   },
          // }
        ],
      },
      animation: {
        appear: {
          animation: 'path-in',
          duration: 5000,
        },
      }
    };

    return <DualAxes {...config} />;
  }
}

function mapStateToProps(state) {
  return {
    pathname: state.router.location.pathname,
    search: state.router.location.search,
    hash: state.router.location.hash,
  }
}

export default connect(mapStateToProps)(BarChart);